<template>
  <div class="app-report">
    <div style="display: flex; flex-direction: row">
      <div style="height: 45px">
        <el-button type="default" @click="pushList">项目列表</el-button>
      </div>
      <div style="margin-left: 10px">
        <el-input
          v-model="searchInfo"
          placeholder="请输入项目名称"
          prefix-icon="el-icon-search"
        />
      </div>
      <div style="margin-left: 20px">
        <el-select
          v-model="yearModel"
          class="selectInput"
          placeholder="提交月报年份"
          @change="selectChange(yearModel, 1)"
        >
          <el-option
            v-for="item in years"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div style="margin-left: 20px">
        <el-select
          v-model="monthModel"
          class="selectInput"
          placeholder="提交月报月份"
          @change="selectChange(monthModel, 2)"
        >
          <el-option
            v-for="item in months"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div style="margin-left: 20px;height：45px;">
        <el-button type="primary" @click="search">搜索</el-button>
      </div>
    </div>

    <el-table
      ref="tableDataRef"
      :data="projectList"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column align="center" prop="id" label="编号" width="60">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="项目名称"
        prop="project_name"
        :show-overflow-tooltip="true"
        align="center"
      />

      <el-table-column prop="bid_open_time" align="center" label="开标时间">
        <template slot-scope="scope">
          <span>{{ scope.row.bid_open_time | parseTime("{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="project_area"
        label="项目区域"
        :show-overflow-tooltip="true"
        align="center"
      />
      <el-table-column
        prop="price_ceiling"
        label="最高限价(万元)"
        :show-overflow-tooltip="true"
        align="center"
      />
      <el-table-column
        prop="scores"
        label="分值组成"
        :show-overflow-tooltip="true"
        align="center"
      />
      <el-table-column
        prop="user_name"
        label="归属分公司"
        :show-overflow-tooltip="true"
        align="center"
      />

      <el-table-column align="center" prop="project_status" label="本月状态">
        <template slot-scope="scope">
          <span
            v-show="scope.row.report_status == 1"
            style="
              color: red;
              font: 14px Tahoma, Helvetica, Arial, '宋体', sans-serif;
              letter-spacing: 1px;
            "
          >未提交</span>
          <span
            v-show="scope.row.report_status == 2"
            style="
              color: #1890ff;
              font: 14px Tahoma, Helvetica, Arial, '宋体', sans-serif;
              letter-spacing: 1px;
            "
          >已提交</span>
        </template>
      </el-table-column>

      <el-table-column align="center" width="200" label="操作">
        <template slot-scope="scope">
          <el-button
            v-show="scope.row.report_status == 1"
            type="text"
            size="small"
            @click="submitReport(scope.$index, scope.row)"
          >提交月报</el-button>
          <el-button
            type="text"
            size="small"
            @click="submitRecord(scope.$index, scope.row, '1')"
          >月报记录</el-button>
          <el-button
            type="text"
            size="small"
            @click="exportReport(scope.$index, scope.row)"
          >下载月报</el-button>
          <!-- <el-button
            @click="finish(scope.$index, scope.row)"
            type="text"
            size="small"
            >完成项目</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
    <div
      v-show="projectList.length != 0"
      class="pagination"
      style="margin-top: 10px"
    >
      <el-pagination
        ref="pager1"
        background
        :current-page.sync="pageIndex"
        :page-size="pageSize"
        :total="total"
        layout="prev, pager, next"
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
      />
    </div>
  </div>
</template>

<script>
import {
  getProject,
  finishProject,
  getProjectPage,
  selectReport,
  searchReport,
  exportReport,
  selectReportPage,
  searchReportPage
} from '@/api/report'

export default {
  props: {
    is_submit: {
      type: String,
      default: '1'
    }
  },
  data() {
    return {
      subStatus: '', // 筛选是否提交model
      searchInfo: '', // 搜索是否提交model
      isSearchInfo: '', // 搜索是否提交model
      pageDisplay: false,
      projectList: [],
      total: 0,
      pageIndex: 1,
      pageSize: 2,
      is_submit_child: '',
      years: [],
      months: [],
      yearModel: '',
      monthModel: ''
    }
  },
  watch: {
    is_submit: {
      handler(newVal) {
        console.log(newVal)
        this.getProjectList(newVal)
        this.is_submit_child = newVal
      }
    }
  },
  created() {
    this.getProjectList(this.is_submit)
    this.is_submit_child = this.is_submit
    this.init()
  },
  methods: {
    init() {
      var myDate = new Date()
      var year = myDate.getFullYear() // 获取当前年
      console.log(year)
      this.years = []
      for (let i = 0; i < 10; i++) {
        this.years.push({ value: year - i, label: year - i + '年' })
      }
      this.months = []
      for (let i = 1; i < 13; i++) {
        this.months.push({ value: i, label: i + '月' })
      }
    },
    // 下载月报
    exportReport(index, row) {
      new Promise((resolve, reject) => {
        exportReport({ id: row.id }).then((res) => {
          const url = res.data
          const name = url.substring(url.lastIndexOf('/') + 1)
          this.$notify({
            title: '开始导出',
            duration: 2000
          })
          const x = new XMLHttpRequest()
          x.open('GET', url, true)
          x.responseType = 'blob'
          x.onload = function() {
            const urls = window.URL.createObjectURL(x.response)
            const a = document.createElement('a')
            a.href = urls
            a.download = name
            a.click()
          }
          x.send()
        })
      })
    },
    // 下一页
    sizeChangeHandle: function(size) {
      this.pagesize = size
    },
    // //项目完成
    // finish(index, row) {
    //   let id = row.id;
    //   this.$confirm("提交项目完成后,项目只可预览,是否继续操作?", {
    //     confirmButtonText: "确认",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   }).then(() => {
    //     new Promise((resolve, reject) => {
    //       finishProject({ id: id }).then((res) => {
    //         this.$message({
    //           type: "success",
    //           message: "提交成功,项目已完成!",
    //         });
    //         this.getProjectList();
    //       });
    //     });
    //   });
    // },
    currentChangeHandle: function(val) {
      const searchInfo = this.isSearchInfo
      const selectInfo = this.subStatus
      if (selectInfo == '' && searchInfo == '') {
        new Promise((resolve, reject) => {
          getProjectPage(val).then((res) => {
            this.projectList = res.data.data
          })
        })
      } else if (selectInfo != '' && searchInfo == '') {
        new Promise((resolve, reject) => {
          selectReportPage(val, { value: selectInfo }).then((res) => {
            this.projectList = res.data.data
          })
        })
      } else if (
        (selectInfo == '' && searchInfo != '') ||
        (selectInfo != '' && searchInfo != '')
      ) {
        new Promise((resolve, reject) => {
          searchReportPage(val, {
            searchInfo: searchInfo,
            selectInfo: selectInfo
          }).then((res) => {
            this.projectList = res.data.data
          })
        })
      }
    },
    // 提交记录
    submitRecord(index, row) {
      this.$router.push({
        path: '/report/details',
        query: { value: 1, id: row.id }
      })
    },
    // 提交月报
    submitReport(index, row) {
      this.$router.push({
        path: '/report/details',
        query: { value: 2, id: row.id }
      })
    },
    // 搜索
    search() {
      const searchInfo = this.searchInfo
      const yearModel = this.yearModel
      const monthModel = this.monthModel
      this.isSearchInfo = this.searchInfo
      new Promise((resolve, reject) => {
        searchReport({
          status: this.is_submit_child,
          searchInfo: searchInfo,
          yearModel: yearModel,
          monthModel: monthModel
        }).then((res) => {
          this.projectList = res.data.data
          this.total = res.data.total
          this.pageIndex = res.data.to
        })
      })
    },
    // 筛选
    selectChange(value, num) {
      num == 1 ? (this.yearModel = value) : (this.monthModel = value)
    },

    getProjectList(status) {
      new Promise((resolve, reject) => {
        getProject({ status: status }).then((response) => {
          this.projectList = response.data.data
          this.total = response.data.total
          this.pageSize = response.data.to
        })
      })
    },
    // 跳转到项目列表
    pushList() {
      this.$router.push('/project/index')
    }
  }
}
</script>

<style lang="scss" scoped>
.app-report {
  width: 100%;
  padding: 20px;
}
.el-table--border {
  //   border: 1px solid #dfe6ec;
  border-bottom: 1px solid #dfe6ec;
}
</style>
